<template>
      <b-nav-item-dropdown right no-caret>
        <template slot="button-content">
          <img src="/static/img/avatars/6.jpg" class="img-avatar" alt="admin">
        </template>
        <b-dropdown-header tag="div" class="text-center"><strong>账户:{{ name }}</strong></b-dropdown-header>
        <b-dropdown-item><i class="fa fa-bell-o"></i> 更新<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-item><i class="fa fa-envelope-o"></i> 消息<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-item><i class="fa fa-comments"></i> 内容<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-header tag="div" class="text-center"><strong>设置</strong></b-dropdown-header>
        <b-dropdown-item><i class="fa fa-user"></i> 简介</b-dropdown-item>
        <b-dropdown-item><i class="fa fa-wrench"></i> 设置</b-dropdown-item>
        <b-dropdown-item><i class="fa fa-usd"></i> 支付<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-item><i class="fa fa-file"></i> 项目<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item><i class="fa fa-shield"></i> 锁定账户</b-dropdown-item>
        <b-dropdown-item v-on:click="logout"><i class="fa fa-lock"></i> 登出</b-dropdown-item>
      </b-nav-item-dropdown>
</template>
<script>
export default {
  name: 'header-dropdown',
  data: () => {
    return {
      itemsCount: 42
    }
  },
  computed: {
    name () {
      return this.$store.getters.name
    }
  },
  methods: {
    logout () {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
      })
    }
  }
}
</script>
